<template>
  <view class="product-banner">
    <swiper
      indicatorColor="#999"
      indicatorActiveColor="#333"
      style="height: 100vw"
      :current="0"
      :circular="true"
      :indicatorDots="true"
    >
      <swiper-item v-for="item in media" :key="item.url">
        <image v-if="isImage(item)" class="slide-image" :src="item.url" />
        <video v-else class="slide-image" @tap="play" :src="item.url" />
      </swiper-item>
      <swiper-item v-if="media.length===0" key="empty">
        <image
          class="slide-image"
          src="https://manbingguanli.oss-cn-beijing.aliyuncs.com/wenduo/e3b9016d83e34beeabc41cc889cde9b5Group 131.jpg"
        />
      </swiper-item>
    </swiper>
  </view>
</template>

<script lang="ts">
import "./index.less";
import { ProductMediaType } from "../../../../../services/products-service";
export default {
  data() {
    return {
      ProductMediaType,
    };
  },
  props: {
    media: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    isImage(media) {
      return media.type === ProductMediaType.IMAGE;
    },
    play(e: Event) {
      e.stopPropagation();
    },
  },
};
</script>
